<template>
    <div style="width: 100%;height: 100%;">
        <div id="china-map" style="width: 100%;height: 100%;"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
// import JSON from '../../mapJson/anhui.json';
import JSON from '../../mapJson/china.json';
export default {
    data() {
        return {
            mapOption: {}
        }
    },
    mounted() {
        this.initMap()
        this.drawMap()
    },
    methods: {
        drawMap() {
            echarts.registerMap('anhui', JSON, {});
            const myChart = echarts.init(
                document.getElementById('china-map'),
            );
            myChart.setOption(this.mapOption);
            window.addEventListener('resize', () => {
                myChart.resize();
            });
        },
        initMap() {
            this.mapOption = {
                backgroundColor: '#000',
                color: ['#5470c6'],
                tooltip: {
                    trigger: 'item',
                    renderMode: 'html',
                    // 触发方式
                    triggerOn: 'click',
                    enterable: true,
                    backgroundColor: '#fff',
                    padding: 0,
                    textStyle: {
                        color: '#000',
                        fontSize: '12'
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
                },
                dispatchAction: {
                    type: 'downplay'
                },
                roam: false,
                roamController: {
                    show: true,
                    x: 'right',
                    mapTypeControl: {
                        china: true
                    }
                },
                series: [
                    // 地图高亮发光效果 默认（内部地市边缘也会发光）
                    // {
                    //     type: 'map',
                    //     map: 'anhui',
                    //     itemStyle: {
                    //         areaColor: '#8abcd1',
                    //         opacity: 0.8,
                    //         // 使用渐变填充进行边缘发光
                    //         borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    //             { offset: 0, color: '#fff' },
                    //             { offset: 1, color: '#fff' }
                    //         ]),
                    //         borderWidth: 2, // 边框宽度
                    //         shadowBlur: 40, // 阴影模糊大小
                    //         shadowColor: '#fff' // 阴影颜色
                    //     }
                    // },
                    // 鼠标移入后高亮发光效果
                    // {
                    //     type: 'map',
                    //     map: 'anhui',
                    //     itemStyle: {
                    //         areaColor: '#8abcd1',
                    //         opacity: 0.8,
                    //     },
                    //     emphasis: {
                    //         // 高亮状态下的样式，这里仅调整边框属性
                    //         itemStyle: {
                    //             borderColor: '#fff', // 边框颜色
                    //             borderWidth: 2, // 边框宽度
                    //             shadowBlur: 20, // 阴影模糊大小
                    //             shadowColor: '#fff' // 阴影颜色
                    //         }
                    //     }
                    // },
                    // {
                    //     type: 'map',
                    //     map: 'anhui',
                    //     itemStyle: {
                    //         areaColor: '#000',
                    //         opacity: 0.8,
                    //         borderColor: '#00ffe4',
                    //         borderWidth: 2,
                    //         shadowBlur: 20,
                    //         shadowColor: '#00ffe4'
                    //     },
                    //     emphasis: {
                    //         // 高亮状态下的样式，这里仅调整边框属性
                    //         itemStyle: {
                    //             borderColor: '#00ffe4',
                    //             borderWidth: 2,
                    //             shadowBlur: 20,
                    //             shadowColor: '#00ffe4'
                    //         }
                    //     }
                    // }
                ],
                geo: [{
                    show: true,
                    map: 'anhui',
                    type: 'map',
                    mapType: 'anhui',
                    roam: false,
                    label: {
                        normal: {
                            // 显示省份标签
                            show: false,
                            textStyle: {
                                color: '#fff',
                                fontSize: 10
                            }
                        },
                        emphasis: {
                            // 对应的鼠标悬浮效果
                            show: true,
                            // 选中后的字体样式
                            textStyle: {
                                color: '#000',
                                fontSize: 14
                            }
                        }
                    },
					itemStyle: {
						//容器外边框设置
						normal: {
							borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
								offset: 0,
								color: '#fff'
							}, {
								offset: 1,
								color: '#fff'
							}], false),
							borderWidth: 3.5, //设置外层边框
							shadowColor: '#fff',
							shadowOffsetY: 0,
							shadowBlur: 60
						},
						//选中状态
						emphasis: {
							show:false
						}
					},
                    emphasis: {
                        label: {
                            show: false
                        }
                    }
                }]
            }

        }
    }
}
</script>
  
<style></style>
  